<template>
	<el-dialog
		title="采集订单历史"
		:visible.sync="visible"
		custom-class="order-dialog"
		width="550px"
	>
		<div class="dialog-content">
			<el-form ref="orderForm" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="时间类型：" prop="queryType">
					<el-select
						v-model="form.queryType"
						filterable
						allow-create
						size="small"
						placeholder="请选择时间类型"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="采集时间：" prop="dateRange">
					<el-date-picker
						v-model="form.dateRange"
						size="small"
						type="datetimerange"
						value-format="yyyy-MM-dd HH:mm:ss"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:default-time="['00:00:00', '23:59:59']"
						:picker-options="pickerOptions"
						placeholder="选择时间区间"
					>
					</el-date-picker>
				</el-form-item>
			</el-form>
		</div>
		<div class="dialog-footer">
			<el-button size="small" @click="close">取消</el-button>
			<el-button size="small" type="primary" @click="submit" :disabled="btnLock"
				>确定</el-button
			>
		</div>
		<p class="desc">每次仅支持采集15天历史订单，如有漏单，联系悟空带货客服：wukongdaihuo4</p>
	</el-dialog>
</template>

<script>
import moment from 'moment';
export default {
	name: 'order-list',
	props: {
		item: {
			type: Object
		}
	},
	data() {
		return {
			visible: false,
			btnLock: false,
			form: {
				queryType: 1
			},
			options: [
				{
					label: '创建时间',
					value: 1
				},
				{
					label: '付款时间',
					value: 2
				},
				{
					label: '结算时间',
					value: 3
				}
			],
			rules: {
				queryType: [{ required: true, message: '时间类型不能为空', trigger: 'blur' }],
				dateRange: [
					{ required: true, message: '采集时间不能为空', trigger: 'blur' },
					{
						validator: (rule, value, callback) => {
							let [start, end] = value || [];

							if (moment(start).isAfter(moment())) {
								callback(new Error('采集时间必须小于当前时间'));
							} else if (moment(end).diff(moment(start), 'day') <= 15) {
								callback();
							} else {
								callback(new Error('采集时间必须在15天内'));
							}
						},
						trigger: 'blur'
					}
				]
			},
			pickerOptions: {
				disabledDate(d) {
					return moment(d).isAfter(
						moment()
							.hour(23)
							.minute(59)
							.second(59)
					);
				}
			}
		};
	},
	created() {},
	methods: {
		open() {
			this.visible = true;
		},
		close() {
			this.visible = false;
		},
		submit() {
			this.$refs['orderForm'].validate(valid => {
				if (valid) {
					const { queryType, dateRange } = this.form;
					const [startTime, endTime] = dateRange;

					if (!this.btnLock) {
						this.btnLock = true;
						this.$service.account.union
							.fetchOrder({
								startTime,
								endTime,
								queryType,
								...this.item
							})
							.then(() => {
								this.$message({
									message: '开始采集',
									type: 'success'
								});
								this.$emit('startCountDown');
								this.close();
							})
							.catch(err => {
								this.$message.error(err);
							})
							.done(() => {
								this.btnLock = false;
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.order-dialog {
    .el-select {
        width 98%
    }
    .desc {
        border-top 1px solid #EFEFEF
        font-size 12px
        text-align center
        margin-top 20px
        padding-top 14px
    }
}
</style>
